<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>评论区页面模板</title>
    <link href="../static/css/commit.css" rel="stylesheet"/>
    <!--    <link th:href="../static/css/bootstrap.css" rel="stylesheet"/>-->
</head>
<body>
<div class="comment-section" th:fragment="commit-section-template">
    <h2>评论区</h2>
    <div th:if="${session.username==null}">
        <div class="comments">
            <div class="comment text-center">
                您还未登录，目前无法查看评论,点此<a th:href="@{/blog/intoLogin}">登录</a>
            </div>
        </div>
    </div>
    <div th:if="${session.username}">
        <div class="comment-box">
        <textarea placeholder="新的风暴已经出现，你的妙评何时出现"
                  rows="4" cols="50"
                  name="commit-content"
                  th:id="input-commit"></textarea>
            <button class="submit-btn" th:id="submit-commit">发布评论</button>
        </div>
        <div class="comments" th:if="${#maps.isEmpty(commit_recover_map)}">
            <div class="comment">
                <h5 class="text-center">当前文章没有评论，快来抢沙发~</h5>
            </div>
        </div>
        <div class="comments" th:if="${not #maps.isEmpty(commit_recover_map)}">
            <div class="comment" th:each="entry:${commit_recover_map}">
                <div class="comment-header">
                    <img th:src="|@{/images/}${entry.key.userPath}|"
                         style="border-radius: 50%;width: 50px;height: 50px"
                         alt="Avatar"
                         data-bs-toggle="tooltip" data-bs-placement="top"
                         th:title="|邮箱:${entry.key.user.email}|"/>
                    <a th:href="@{/blog/returnP}"
                       th:if="${session.user.id==entry.key.userid}">
                        <span class="user-name name" th:text="${entry.key.user.username}">小明</span>
                    </a>
                    <a th:href="|@{/content/intoOther?phone=}${entry.key.user.phone}&username=${entry.key.user.username}|"
                       th:if="not ${session.user.id==entry.key.userid}">
                        <span class="user-name name" th:text="${entry.key.user.username}">小明</span>
                    </a>
                    <span class="author-badge" th:if="${author==entry.key.user.username}">作者</span>
                    <span class="myself-badge" th:if="${session.user.id==entry.key.userid}">本人</span>
                    <span class="comment-time" th:text="${entry.key.timeString}">2024-12-25 10:30</span>
                </div>
                <p class="comment-content" th:text="${entry.key.content}">这篇文章真的很棒！感谢分享！</p>
                <button class="delete-btn delete-commit function" type="button"
                        th:data-committime="${entry.key.timeString}"
                        th:data-commitcontent="${entry.key.content}"
                        th:if="${session.user.id==entry.key.userid}">删除
                </button>
                <button class="reply-btn function"
                        th:data-reply="${entry.key.id}">回复
                </button>
                <div class="reply-box" th:id="|reply-box-${entry.key.id}|" style="display: none">
                    <textarea placeholder="写下你的回复..."
                              rows="3" cols="50"
                              name="commit-content"
                              th:id="|textarea-${entry.key.id}|"></textarea>
                    <button class="submit-reply-btn reply-submit"
                            th:id="|reply-submit-${entry.key.id}|"
                            th:data-reply="${entry.key.id}"
                            th:data-committime="${entry.key.timeString}">发布回复
                    </button>
                </div>

                <div class="reply-comment" th:each="recover:${entry.value}">
                    <div class="comment-header">
                        <img th:src="|@{/images/}${recover.userPath}|"
                             style="border-radius: 50%;width: 35px;height: 35px"
                             alt="Avatar"
                             data-bs-toggle="tooltip" data-bs-placement="top"
                             th:title="|邮箱:${recover.user.email}|"/>
                        <a th:href="@{/blog/returnP}" th:if="${session.user.id==recover.userid}">
                            <span class="user-name name" th:text="${recover.user.username}">小明</span>
                        </a>
                        <span><a></a></span>
                        <a th:href="|@{/content/intoOther?username=}${recover.user.username}|"
                           th:if="not ${session.user.id==recover.userid}">
                            <span class="user-name name" th:text="${recover.user.username}">小明</span>
                        </a>
                        <span class="author-badge" th:if="${author==recover.user.username}">作者</span>
                        <span class="myself-badge" th:if="${session.user.id==recover.userid}">本人</span>
                        <span class="comment-time" th:text="${recover.timeString}">2024-12-25 10:30</span>
                    </div>
                    <p class="comment-content" th:text="${recover.content}">谢谢小明的评论！我也觉得这篇文章很有价值。</p>
                    <button class="delete-recover function delete-btn" type="button"
                            th:data-recovertime="${recover.timeString}"
                            th:data-recovercontent="${recover.content}"
                            th:data-committime="${entry.key.timeString}"
                            th:if="${session.user.id==recover.userid}">删除
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div class="container container-commit" th:fragment="commit-section-template">-->
<!--    <div th:if="${session.username==null}" class="row no-login-section">-->
<!--        您还未登录，目前无法查看评论,点此<a th:href="@{/blog/intoLogin}">登录</a>-->
<!--    </div>-->
<!--    <div th:if="${session.username}">-->
<!--        &lt;!&ndash;    评论框&ndash;&gt;-->
<!--        <div class="row">-->
<!--            <div class="write">-->
<!--                <form>-->
<!--                    <h5>评论：</h5>-->
<!--                    <div class="form-floating m-3">-->
<!--                        <textarea class="form-control" name="commit-content" id="input-commit"-->
<!--                                  placeholder="新的风暴已经出现，你的妙评何时出现"></textarea>-->
<!--                        <label for="input-commit">Comments</label>-->
<!--                    </div>-->
<!--                    <button type="button" id="submit-commit" class="btn btn-primary m-3 justify-content-end">提交-->
<!--                    </button>-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="row mb-5" style="background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);">-->
<!--            <hr/>-->
<!--            <h4>评论区</h4>-->
<!--            <div th:if="${!#strings.isEmpty(session.user.id)}">-->
<!--                <div class="show container container-commit border">-->
<!--                    <div class="text-center no-commits p-3 m-3" th:if="${#maps.isEmpty(commit_recover_map)}">-->
<!--                        当前文章没有评论，快来抢沙发~-->
<!--                    </div>-->
<!--                    <ul th:if="${not #maps.isEmpty(commit_recover_map)}">-->
<!--                        <hr/>-->
<!--                        <div th:each="entry:${commit_recover_map}">-->
<!--                            <div class="comment" th:id="|comment-${entry.key.userid}|">-->
<!--                                <p>-->
<!--                                    &lt;!&ndash;th:src="${pageContext.request.contextPath}/images/${entry.key.userPath}&ndash;&gt;-->
<!--                                    <img th:src="|@{/images/}${entry.key.userPath}|"-->
<!--                                         STYLE="border-radius: 50% ;width:50px;height:50px;"-->
<!--                                         alt="Avatar"-->
<!--                                         class="avatar"-->
<!--                                         data-bs-toggle="tooltip"-->
<!--                                         data-bs-placement="top"-->
<!--                                         th:title="|邮箱:${entry.key.user.email}|"/>-->

<!--                                    &lt;!&ndash;                            如果当前用户是评论本人，则返回的是本人的页面&ndash;&gt;-->
<!--                                    &lt;!&ndash;                            如果当前用户不是评论本人，则返回别人的页面&ndash;&gt;-->
<!--                                    <span class="author-badge" th:if="${author==entry.key.user.username}">作者</span>-->

<!--                                    <span class="myself-badge" th:if="${session.user.id==entry.key.userid}">本人</span>-->

<!--                                    <a th:href="@{/blog/returnP}" th:if="${session.user.id==entry.key.userid}">-->
<!--                                <span class="name"-->
<!--                                      th:text="${entry.key.user.username}">-->
<!--                                    </span>-->
<!--                                    </a>-->
<!--                                    <a th:href="|@{/content/intoOther?username=}${entry.key.user.username}|"-->
<!--                                       th:if="not ${session.user.id==entry.key.userid}">-->
<!--                                 <span class="name"-->
<!--                                       th:text="${entry.key.user.username}">-->
<!--                                 </span>-->
<!--                                    </a>-->
<!--                                </p>-->
<!--                            </div>-->
<!--                            <div class="content">-->
<!--                                <p class="text" th:text="${entry.key.content}">-->
<!--                                </p>-->
<!--                                <div class="function row">-->
<!--                                    <div class="col-5">-->
<!--                                <span class="time"-->
<!--                                      th:text="${entry.key.timeString}">&nbsp;-->
<!--                                    </span>-->

<!--                                        <span class="delete-commit function" type="button"-->
<!--                                              th:data-committime="${entry.key.timeString}"-->
<!--                                              th:data-commitcontent="${entry.key.content}"-->
<!--                                              th:if="${session.user.id==entry.key.userid}">-->
<!--                                                <span class="iconfont icon-shanchu">删除</span>|-->
<!--                                            </span>-->
<!--                                        <span type="button" class="reply-btn function"-->
<!--                                              th:data-reply="${entry.key.id}"><span-->
<!--                                                class="iconfont icon-huifu">回复</span></span>-->
<!--                                    </div>-->
<!--                                </div>-->

<!--                            </div>-->

<!--                            <div class="reply-box m-3" th:id="|reply-box-${entry.key.id}|" style="display: none;">-->
<!--                                <div class="form-floating m-3">-->
<!--                                    <textarea class="form-control" name="commit-content"-->
<!--                                              th:id="|textarea-${entry.key.id}|"-->
<!--                                              placeholder="在此输入回复" id="floatingRecoverarea"></textarea>-->
<!--                                    <label for="floatingRecoverarea">Comments</label>-->
<!--                                </div>-->
<!--                                <button class="reply-submit btn btn-primary" th:id="|reply-submit-${entry.key.id}|"-->
<!--                                        th:data-reply="${entry.key.id}" th:data-committime="${entry.key.timeString}">发送-->
<!--                                </button>-->
<!--                            </div>-->

<!--                            <ul class="border recover-region" th:each="recover:${entry.value}">-->
<!--                                <li class="align-content-end">-->
<!--                                    <p>-->
<!--                                        <img th:src="|@{/images/}${recover.userPath}|"-->
<!--                                             STYLE="border-radius: 50% ;width:35px;height:35px;"-->
<!--                                             alt="Avatar"-->
<!--                                             class="avatar"-->
<!--                                             data-bs-toggle="tooltip"-->
<!--                                             data-bs-placement="top"-->
<!--                                             th:title="|邮箱:${recover.user.email}|"/>-->

<!--                                        <span class="author-badge" th:if="${author==recover.user.username}">作者</span>-->

<!--                                        <span class="myself-badge"-->
<!--                                              th:if="${session.user.id==recover.userid}">本人</span>-->

<!--                                        <a th:href="@{/blog/returnP}"-->
<!--                                           th:if="${session.user.id==recover.userid}">-->
<!--                                <span class="name"-->
<!--                                      th:text="${recover.user.username}">-->
<!--                                    </span>-->
<!--                                        </a>-->
<!--                                        <a th:href="|@{/content/intoOther?username=}${recover.user.username}|"-->
<!--                                           th:if="not ${session.user.id==recover.userid}">-->
<!--                                 <span class="name"-->
<!--                                       th:text="${recover.user.username}">-->
<!--                                 </span>-->
<!--                                        </a>-->
<!--                                    </p>-->
<!--                                    <div class="content">-->
<!--                                        <p class="text" th:text="${recover.content}">-->
<!--                                        </p>-->

<!--                                        <div class="function row">-->
<!--                                            <div class="col-3">-->
<!--                                        <span class="time" th:text="${recover.timeString}">-->
<!--                                        </span>-->
<!--                                                <span class="delete-recover function" type="button"-->
<!--                                                      th:data-recovertime="${recover.timeString}"-->
<!--                                                      th:data-recovercontent="${recover.content}"-->
<!--                                                      th:data-committime="${entry.key.timeString}"-->
<!--                                                      th:if="${session.user.id==recover.userid}">-->
<!--                                                            <span class="iconfont icon-shanchu">删除</span>-->
<!--                                        </span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <hr>-->
<!--    </div>-->
<!--</div>-->
<script>
    // 获取所有的"回复"按钮
    const replyButtons = document.querySelectorAll('.reply-btn');

    // 遍历每个"回复"按钮并绑定点击事件
    replyButtons.forEach(button => {
        button.addEventListener('click', function () {
            const replyBox = this.nextElementSibling;
            // 切换显示或隐藏回复框
            replyBox.style.display = replyBox.style.display === 'none' || replyBox.style.display === '' ? 'flex' : 'none';
        });
    });
</script>
</body>
</html>